<template>
  <div class="content">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ t(String(route.meta.title)) }}</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <img src="/imgs/club/add.webp" alt="" @click="onSubmitCreate" class="add" />
      </template>
    </nut-navbar>

    <!-- tabs -->
    <nut-tabs @change="tabChange" v-model="state.game_type" title-scroll title-gutter="10" v-if="gamblingTabList">
      <nut-tab-pane :title="t(item.name)" :pane-key="item.id" v-for="item in gamblingTabList" :key="item.id">
        <nut-infinite-loading v-model="infinityValue" load-more-txt=" " :has-more="hasMore" @load-more="onLoad">
          <nut-empty v-if="items.length == 0" :description="t('nomore_data')"></nut-empty>
          <div class="container" v-else>
            <div
              v-for="(j, index) in items"
              :key="index"
              class="card"
              :class="{ disabled: j.is_open === 0 ? 'stopped' : '' }"
            >
              <div class="info">
                <div class="title">{{ j.name }}</div>
                <div class="price">
                  <ImgT class="jinbi" src="/imgs/club/jinbi.png" />
                  <span>{{ j.min_bet }}/{{ j.min_bet * 2 }}</span>
                </div>
                <span
                  v-if="j.is_open === 0"
                  class="tag"
                >
                  <em class="tag_text">{{t('club_page_yclose')}}</em>
                </span>
              </div>
              <div class="actions">
                <button v-if="j.is_open === 0" class="start" @click="start(j)">{{t('club_page_open')}}</button>
                <button v-if="j.is_open === 1" class="stopped" @click="stopped(j)">{{t('club_page_close')}}</button>
                <button class="dismiss" @click="dismiss(j)">{{t('club_page_del')}}</button>
              </div>
              <!-- <div class="overlay" v-if="j.status === 'stopped'"></div> -->
            </div>
          </div>
        </nut-infinite-loading>
        
      </nut-tab-pane>
    </nut-tabs>
    <!-- 申请 -->
    <Modal v-model:visible="isShowWin" :title="t('tip')" @close="">
      <div class="popup_body">
        <div class="info">{{ club_tip }}</div>
        <div class="submit_btn">
          <span class="submit_close" @click="close">{{ t('cancel') }}</span>
          <Btn height="44px" width="147px" class="submit" @click="submitAc">{{ t('confirm') }}</Btn>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useI18n } from "vue-i18n";
import { ref, reactive, onMounted } from "vue";
import {useRoute, useRouter} from "vue-router";

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { showToast } from "@nutui/nutui";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const infinityValue = ref(false);
const hasMore = ref(true);
const gamblingTabList = reactive([
  {
    id: 0,
    name: t('club_page_all'),
  },
  {
    id: 47,
    name: t('club_page_47'),
  },
  {
    id: 49,
    name: t('club_page_49'),
  },
]);
const state = reactive({
  game_type: 0, //游戏类型
  club_id: 0, // 俱乐部ID
});

const params: any = reactive({
  // 参数
  pageSize: 10,
  page: 1,
});
const seleteType: any = ref("");
const tabChange = (item: any) => {
  state.game_type = item.paneKey
  getRoomList()
  const obj: any = {
    0:  t('club_page_all'),
    47:  t('club_page_47'),
    49: t('club_page_49'),
  }
  seleteType.value = obj[item.title]
}

const items = ref<any>([]);


const isShowWin = ref(false);
const club_tip = ref('');
const currentItem:any = ref(null);
const targetStatus = ref(''); 

const handleAction = (item: any, status: any, tip: any) => {
  currentItem.value = item;
  targetStatus.value = status;
  club_tip.value = tip;
  isShowWin.value = true;
};

const start = (item: any) => {
  handleAction(item, 'active', t('club_page_openpj'))
};
const dismiss = (item: any) => {
  handleAction(item, 'dismissed', t('club_page_delpj'))
};
const stopped = (item: any) => {
  handleAction(item, 'stopped', t('club_page_closepj'))
  
};

const onSubmitCreate = () => {
  router.push({ 
    path: "/club/createGamebling",
    query: { club_id: state.club_id }
  })
};


// 获取牌局列表
const getRoomList = () => {
  const req = NetPacket.req_room_list();
  req.club_id = state.club_id
  req.game_type = state.game_type
  req.page_size = params.pageSize
  req.page_index = params.page
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_list",
    callback: getRoomListHandle,
  });
};
// 牌局列表返回
const getRoomListHandle = (res: any) => {
  console.log('res' ,res)
  items.value = res.room_list
};

const onLoad = () => {
  params.page++;
  getRoomList();
};


// 解散牌局
const roomDelete = (id: number) => {
  const req = NetPacket.req_room_delete();
  req.room_id = id
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_operate",
    callback: roomDeleteHandle,
  });
};
// 解散牌局返回
const roomDeleteHandle = (res: any) => {
  const tipStr: any = {
    'ROOM_DELETE_SUCCESS': t('club_page_jscg'),
  };
  if (res.result === 'ROOM_DELETE_SUCCESS') {
    showToast.text(tipStr[res.result])
    getRoomList()
  } else {
    showToast.text(t('club_page_jssb'))
  }
};

// 停止牌局
const roomClose = (id: number) => {
  const req = NetPacket.req_room_close();
  req.room_id = id
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_operate",
    callback: roomCloseHandle,
  });
};
// 停止牌局返回
const roomCloseHandle = (res: any) => {
  const tipStr: any = {
    'ROOM_CLOSE_SUCCESS': t('club_page_closecg'),
  };
  if (res.result === 'ROOM_CLOSE_SUCCESS') {
    showToast.text(tipStr[res.result])
    getRoomList()
  } else {
    showToast.text(t('club_page_closesb'))
  }
};

// 开启牌局
const roomOpen = (id: number) => {
  const req = NetPacket.req_room_open();
  req.room_id = id
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_operate",
    callback: roomOpenHandle,
  });
};
// 开启牌局返回
const roomOpenHandle = (res: any) => {
  const tipStr: any = {
    'ROOM_OPEN_SUCCESS': t('club_page_opencg'),
  };
  if (res.result === 'ROOM_OPEN_SUCCESS') {
    showToast.text(tipStr[res.result])
    getRoomList()
  } else {
    showToast.text(t('club_page_opensb'))
  }
};


// 关闭弹窗
const close = () => {
  isShowWin.value = false;
};

// 确认操作
const submitAc = () => {
  if (currentItem.value) {
    currentItem.value.status = targetStatus.value;
  }
  if(targetStatus.value === 'stopped') { 
    roomClose(currentItem.value.room_id)
  } else if (targetStatus.value === 'active') {
    roomOpen(currentItem.value.room_id)
  } else if (targetStatus.value === 'dismissed') {
    roomDelete(currentItem.value.room_id)
  }
  close();
};

onMounted(async () => {
  seleteType.value = t('club_page_all')
  const { clubId } = route.query;
  state.club_id = Number(clubId)
  state.game_type = 0
  await getRoomList()
});

</script>

<style scoped lang="scss">
.content {
  font-size: 14px;
  margin: 0 0 10px;

  .arrow_left {
    width: 24px;
    height: 24px;
  }

  .save {
    line-height: 32px;
    text-align: center;
    color: #5BD9FF;
  }
  :deep(.nut-navbar__right) {
    padding: 0;
  }
  .add {
    width: 32px;
    height: 32px;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 347px;
    margin: 0 auto;

    .card {
      position: relative;
      padding: 10px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(19, 18, 50, 0.00) 0%, #2F2D6C 100%), #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

      .info {
        flex-grow: 1;
        .title {
          color: #FFF;
          font-size: 14px;
          font-weight: 500;
        }

        .price {
          color: #C6C4F5;
          font-size: 14px;
          font-weight: 500;
          margin-top: 3px;
          
          .jinbi {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: sub;
          }
        }

        .tag {
          width: 45px;
          height: 36px;
          line-height: 28px;
          font-size: 10px;
          border-radius: 6px;
          color: #fff;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 9;
          background: url(/imgs/club/gly.png) no-repeat;
          background-size: 100% 100%;
          .tag_text {
            display: inline-block;
            transform: rotate(-40deg);
          }
        }
      }

      .actions {
        display: flex;
        gap: 8px;

        button {
          width: 48px;
          height: 32px;
          border: none;
          text-align: center;
          line-height: 32px;
          border-radius: 8px;
          color: #FFF;
          font-size: 12px;
          font-weight: 500;
        }
        .start {
          background: linear-gradient(0deg, #1DBA8B 0%, #1DBA8B 100%);
        }

        .dismiss {
          background: #D16262;
        }

        .stopped {
          background: #bbb;
        }
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        z-index: 99;
      }
    }

    .disabled {
      opacity: 0.5;
    }
  }
}

.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
    text-align: center;
    color: #FFFFFF;
    margin: 24px 0;
  }

  .submit_btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;

    .submit_close {
      width: 147px;
      height: 42px;
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      background: #282747;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      border-radius: 8px;
    }
  }
}
</style>
